﻿@model HanGu.Entity.MemberInfo
@{
    ViewBag.Title = "上传头像——我的汉古";
    Layout = "~/Views/Shared/Main.cshtml";
    TempData["sidecalss"] = "EveryDayWisdom";
}
@section Header
{
    <style>
        .contentLeft
        {
            width: 100%;
        }
        #partContent
        {
            width: 100%;
        }
        .movieContain
        {
            width: 100%;
            margin-top: 5px;
        }
        .crop_preview{position:absolute; left:520px; top:0; width:150px; height:150px; overflow:hidden;}

    </style>
@*    <link href="/Content/ImgSelect/css/imgareaselect-default.css" rel="stylesheet" type="text/css" />    
    <script src="/Content/ImgSelect/scripts/jquery.imgareaselect.min.js" type="text/javascript"></script>
*@    <link href="/Content/uploadify/css/uploadify.css" rel="stylesheet" type="text/css" />
    <script src="/Content/uploadify/scripts/swfobject.js" type="text/javascript"></script>
    <script src="/Content/uploadify/scripts/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>
    <link href="/Content/Jcrop/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
    <script src="/Content/Jcrop/jquery.color.js" type="text/javascript"></script>
    <script src="/Content/Jcrop/jquery.Jcrop.min.js" type="text/javascript"></script>
}
@section Banner
{
    @Html.Partial("Banner")
}
@section Content{
    <div class="contentLeft">
        <table cellpadding="0" cellspacing="0" id="partContent" style="height: 100%;">
            <tr>
                <td>
                    <div class="ContentTitle">
                        <div class="ContentTitleLeft">
                            <img src="/Content/images/vipmyhanguTitle.gif" width="145" height="26" alt=""></div>
                        <div class="ContentTitleRight">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="content">
                    <div class="contentLeft" style="height: 550px; width: 150px; background-color: #ccc">
                        @Html.Partial("vipLeftMenu")
                    </div>
                    <div class="contentLeft MyInfo" style="height: 100%; width: 500px; margin-left: 20px;">
                        <form action="/vip/UploadPic" id="UploadPicForm">
                        <input type="hidden" id="x1" />
                        <input type="hidden" id="y1" />
                        <input type="hidden" id="x2" />
                        <input type="hidden" id="y2" />
                        <input type="hidden" id="width" />
                        <input type="hidden" id="height" />
                        <input type="hidden" id="sourcepath" value="" />
                        <input type="hidden" id="zoom" />
                        <div style="border: 4px solid #ccc;">
                            <img id="sourcePic" src="/Content/Default.jpg" />
                        </div>
                        <div>
                            <div id="fileQueue">
                            </div>
                            <input type="file" name="uploadify" id="uploadify" />
                        </div>
                        <div class="login_bar">
                            <div style="width: 60px; float: left">
                                <input class="sub" type="button" value="保存" style="width: 50px" onclick="sumbitForm()" /></div>
                        </div>
                        </form>
                    </div>
                </td>
            </tr>
        </table>
    </div>
}
@section Side{
    @Html.Partial("Side")
}
<script>
    function ReSetImg(img) {
        if (img.width() > 500) {            
            $("#zoom").val(img.width() / 500);
            img.attr("width", 500);            
        }
    }
    $(function () {
        var img = $("#sourcePic");
        ReSetImg(img);
        $("#uploadify").uploadify({
            'uploader': '/Content/uploadify/scripts/uploadify.swf',
            'script': '/DownLoad/SaveFile',
            'cancelImg': '/Content/uploadify/cancel.png',
            'folder': 'Temp',
            'queueID': 'fileQueue',
            'auto': true,
            'multi': false,
            //            'sizeLimit': 200 * 1024,
            'fileExt': "*.jpg;*.jpeg;*.gif;*.png;",
            'fileDesc': "*.jpg;*.jpeg;*.gif;*.png;",
            'scriptData': { 'ClassType': 'Temp\\Vip' },
            'onComplete': function (event, queueId, fileObj, response, data) {
                //debugger;
                var json = eval("(" + response + ")");
                img.attr("src", json.forwardUrl);
                $("#sourcepath").val(json.forwardUrl);
                if (json.width > 500) {
                    $("#zoom").val(json.width / 500);
                    img.attr("width", 500);
                    img.attr("height", json.height * (500 / json.width));
                }
                else {
                    img.attr("width", json.width);
                    img.attr("height", json.height);

                }
                //ReSetImg(img);
                
                $("#sourcePic").Jcrop({
                    aspectRatio: 1,
                    //onChange: showCoords,
                    onSelect: showCoords
                });
            }

        });

    });

    function showCoords(obj) {
        var img = $("#sourcePic");
        $('#vipPic img').removeAttr("width");
        $('#vipPic img').attr("src", img.attr("src"));
        $("#x1").val(obj.x);
        $("#y1").val(obj.y);
        $("#width").val(obj.w);
        $("#height").val(obj.h);
        if (parseInt(obj.w) > 0) {
            //计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到
            var rx = $("#vipPic").width() / obj.w;
            var ry = $("#vipPic").height() / obj.h;
            //通过比例值控制图片的样式与显示
            $('#vipPic img').css({
                width: Math.round(rx * img.width()),
                height: Math.round(ry * img.height()),
                marginLeft: -Math.round(rx * obj.x),
                marginTop: -Math.round(ry * obj.y)
            });
        }
    }

    $(document).ready(function () {
        //记得放在jQuery(window).load(...)内调用，否则Jcrop无法正确初始化
       
        //简单的事件处理程序，响应自onChange,onSelect事件，按照上面的Jcrop调用
       

    });


    function sumbitForm() {
        $.ajax({
            type: "POST",
            url: "/vip/UploadPic",
            data: "path=" + $("#sourcepath").val() + "&x1=" + $("#x1").val() + "&x2=" + $("#x2").val() + "&y1=" + $("#y1").val() + "&y2=" + $("#y2").val() + "&width=" + $("#width").val() + "&height=" + $("#height").val() + "&zoom=" + $("#zoom").val(),
            success: function (data) {
                var json = eval("(" + data + ")");
                if (json.statusCode == 200) {
                    $('#vipPic img').attr("src", json.forwardUrl);
                    alert(json.message);
                }
                else {
                    alert(json.message);
                }
            }
        });
    }

</script>
